import React from 'react'
import { connect } from 'dva'
import { Form, Button, Modal, Popconfirm, Table, Row, Col, Input, Select, Cascader, Icon, Checkbox, DatePicker, message, Spin } from 'antd'
import { Link, hashHistory } from 'dva/router'
import { drop } from 'lodash'
import config from 'config/config'
import { mapStateToProps } from 'utils/view_utils'
import styles from './registeredUserStatisticsStyle.less'
import ListPage from 'widget/PageTmpl/ListPage'
import classnames from 'classnames/bind';
let cx = classnames.bind(styles);
import { CustomCard } from '../../../widget/Grid/CustomCard'
import FlagBtn from 'widget/FlagBtn/FlagView'
const confirm = Modal.confirm;

const registeredUserStatisticsView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model
  // modelObj.xxx获取model中状态机的值
  let { areaList, area1, biz, products, idArr, loading, roleList, showModal, userInfo, professionalBroker } = modelObj

  function detailSkip(type, id) {
    dispatch({
      type: `${namespace}/getUserDetail`,
      payload: { id }
    })
    dispatch({
      type: `${namespace}/updateStore`,
      payload: { showModal: !showModal }
    })
  }
  function updateModal(value) {
    dispatch({
      type: `${namespace}/updateStore`,
      payload: { showModal: value }
    })
  }
  function cancel() {
    dispatch({
      type: `${namespace}/doCancel`,
      payload: { accountId: userInfo.accountId }
    })
  }


  let pageProps = {
    // ---------- 界面部分 ----------
    ui: {
      // 页面接口地址
      api_url: `admin/person/registerList`,
      //api_url: `admin/news/list`,
      // 接口方式
      method: "POST",
      // "data_field_name":"data",
      app: "",
      // 接口参数
      params: {
        // type:2
      },
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      mockData: null,
      isShowLoading: loading,
      reqTimeout: '240000',
      // 查询栏
      search_bar: {
        fields: [
          {
            en_name: 'validTime',
            zh_name: '创建时间',
            elem_type: 'Date',
            format: 'YYYY-MM-DD',
            // query_format: "YYYY-MM-DD HH:mm:ss",   // 请求参数, 当请求参数和显示时格式不同可通过该参数区分
            // double: true,  // 日期范围组件 使用"YYYY-MM-DD HH:mm:ss"格式时, 显示不全时可使用该参数, 将占据两格位置
            split_keys: ['startTime', 'endTime'],
            elem_valid_type: 'string'
          },
          {
            en_name: 'roleId',
            zh_name: '身份',
            elem_type: 'Select',
            elem_valid_type: 'string',
            //关联的更改的搜索字段
            cmpt_items: roleList,
          },
          {
            en_name: 'name',
            zh_name: '姓名',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'mobile',
            zh_name: '号码',
            elem_type: 'Input',
            elem_valid_type: 'string',
          }

        ],
        searchHandler: () => { // 自定义搜索按钮回调函数，点击搜索时触发
          console.log('search click')
        },
        resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
          console.log('reset click')
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'channel',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ]
      },
      // 数据表格  序号 资讯标题 所属项目  所属城市 创建人 创建时间 更新人 更新时间   操作
      table:
      {
        status_params: "status=0",
        status_text: "全部",
        // 表头字段列表
        scroll: { x: 1200 },
        fields: [
          {
            en_name: "name",
            zh_name: "姓名",
          },
          {
            en_name: "mobile",
            zh_name: "手机",
          },
          {
            en_name: "roleName",
            zh_name: "身份",
          },
          {
            en_name: "createTime",
            zh_name: "创建时间",
          },
          {
            en_name: "gender",
            zh_name: "性别",
            render: (a, item, index, d, e, f) => {
              return (
                <span>{['女', '男'][a]}</span>
              )
            }
          },
          {
            en_name: "idCardNo",
            zh_name: "idCardNo",
          },
          {
            en_name: "idCardType",
            zh_name: "idCardType",
            render: (a, item, index, d, e, f) => {
              return (
                <span>{['', '身份证', '台胞证', '回乡证', '居住证', '签证', '护照', '户口本', '军官证', '其他'][a]}</span>
              )
            }
          },
          {
            en_name: "edit",
            zh_name: "操作",
            width: 50,
            fixed: 'right',
            render: (a, item, index, d, e, f) => {

              return (
                <span>
                  {
                    <FlagBtn node={<Button type="link" onClick={() => detailSkip('', item.accountId)}>详情</Button>} btnId={''}>
                    </FlagBtn>
                  }
                </span>
              )
            },
          }
        ]
      },
      // 操作栏
      action_bar: [
      ]
    },
  }

  if (!!modelObj.biz) {
    pageProps.biz = modelObj.biz
    pageProps.biz.syncBackCbf = (biz) => {
      dispatch({
        type: `${namespace}/updateStore`,
        payload: { biz }
      })
    }
  }

  return (
    <div className={cx('pageLayout')}>
      <ListPage pageProps={pageProps} loading={loading} />
      <Modal
        title={`用户详情`}
        visible={showModal}
        onOk={() => updateModal(false)}
        onCancel={() => updateModal(false)}
        footer={null}
      >
        <Row className={cx('mb')}>
          <Col span={12} className="col">
            <Col span={8} className={cx('label')}>姓名：</Col>
            <Col span={16}>{userInfo.name}</Col>
          </Col>
          <Col span={12} className="col">
            <Col span={8} className={cx('label')}>手机号码：</Col>
            <Col span={16}>{userInfo.mobile}</Col>
          </Col>
        </Row>
        <Row className={cx('mb')}>
          <Col span={24}>
            <Col span={4} className={cx('label')}>身份：</Col>
            <Col span={16}>{professionalBroker.role}</Col>
          </Col>
        </Row>
        {userInfo.isVerify >= 0 &&
          <Row className={cx('mb')}>
            <Col span={24}>
              <Col span={4} className={cx('label')}>审核状态：</Col>
              <Col span={16}>{['审核中', '通过', '未通过'][userInfo.isVerify]}</Col>
            </Col>
          </Row>
        }
        <Row className={cx('mb')}>
          <Col span={24}>
            <Col span={4} className={cx('label')}>创建时间：</Col>
            <Col span={16}>{userInfo.createTime}</Col>
          </Col>
        </Row>
        <Row className={cx('mb')}>
          <Col span={24}>
            <Col span={4} className={cx('label')}>注册时间：</Col>
            <Col span={16}>{userInfo.registerTime && userInfo.registerTime != '' ? userInfo.registerTime : '未注册'}</Col>
          </Col>
        </Row>
        {userInfo.isVerify >= 0 &&
          <Row className={cx('mb')}>
            <Col span={24} className={cx('mb')}>
              <Col span={4} className={cx('label')}>所在城市：</Col>
              <Col span={16}>{professionalBroker.city}</Col>
            </Col>
            <Col span={24} className={cx('mb')}>
              <Col span={4} className={cx('label')}>单位/组织：</Col>
              <Col span={16}>{professionalBroker.orgName}</Col>
            </Col>
            <Col span={24} className={cx('mb')}>
              <Col span={4} className={cx('label')}>备注信息：</Col>
              <Col span={16}>{professionalBroker.comments}</Col>
            </Col>
            <Col span={24} className={cx('mb')}>证明材料：
                <img className={cx('professionalImg')} src={professionalBroker.imgUrl}></img>
            </Col>
            <Col span={24} className={cx('mb')}>
              <Col span={4} className={cx('label')}>认证时间：</Col>
              <Col span={16}>{professionalBroker.certificationTime}</Col>
            </Col>
            {userInfo.isVerify == 1 && <Button type="default" className={cx('cancel')} onClick={() => cancel()}>取消认证</Button>}
          </Row>
        }

      </Modal>
      {/* <Spin spinning={loading}>
      </Spin> */}
    </div>
  )
}
// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(registeredUserStatisticsView))
